import React, { Component } from 'react'
import axios from 'axios'

export default class Http extends Component {
    getFetch() {
        fetch('http://localhost:3000/api/menulist')
            .then(res => res.json()) // 不能获取数据 第二个then中才可以
            .then(res => {
                console.log(res);
            })
    }
    postFetch() {
        fetch('http://localhost:3000/api/menuadd', {
            method: 'POST',
            body: JSON.stringify({
                pid: 'we4rwe',
                url: 'dsf',
                title: 'wrwer'
            })
        })
            .then(res => res.json()) // 不能获取数据 第二个then中才可以
            .then(res => {
                console.log(res);
            })
    }
    getXHR() {
        axios.get('http://localhost:3000/api/menulist?istree=1')
            .then(res => {
                console.log(res);
            })
    }
    postXHR() {
        axios.post('http://localhost:3000/api/menuedit', {
            pid: 'we4rwe',
            url: 'dsf',
            title: 'wrwer',
            id: 'w3erwerf'
        })
            .then(res => {
                console.log(res);
            })
    }
    getXHR11() {
        // this是当前组件实例  这个实例继承了第一行的Component这个类中的属性和方法
        // 在index.js中 给Component添加了http的方法 所以 这个组件中也能用
        this.http.get('http://localhost:3000/api/menulist?istree=1')
            .then(res => {
                console.log(res);
            })
    }
    postXHR11() {
        this.http.post('http://localhost:3000/api/menuedit', {
            pid: 'we4rwe',
            url: 'dsf',
            title: 'wrwer',
            id: 'w3erwerf'
        })
            .then(res => {
                console.log(res);
            })
    }
    render() {
        return (
            <div>
                <p>fetch---JS内置的发请求方式</p>
                <button onClick={() => this.getFetch()}>fetch-get</button>
                <button onClick={() => this.postFetch()}>fetch-post</button>
                <br></br>
                <button onClick={() => this.getXHR()}>XHR-get</button>
                <button onClick={() => this.postXHR()}>XHR-post</button>
                <br></br>
                <button onClick={() => this.getXHR11()}>Com-get</button>
                <button onClick={() => this.postXHR11()}>Com-post</button>
            </div>
        )
    }
}
